<template>
  <div>
    <!--添加或编辑菜单-->
    <el-dialog
      :title="editOrAddTitle"
      :visible.sync="editOrAddShow"
      width="30%"
      :before-close="handleClose">
      <span>

        <el-form label-width="80px" :model="menu">
            <el-form-item label="选择目录">
              <el-select v-model="menu.pid" filterable placeholder="请选择父级菜单">
                    <el-option
                      v-for="item in parent_option"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="菜单名称">
              <el-input v-model="menu.name"></el-input>
            </el-form-item>
            <el-form-item label="图标">
              <el-input v-model="menu.icon"></el-input>
            </el-form-item>
            <el-form-item label="组件名称">
              <el-input v-model="menu.compName"></el-input>
            </el-form-item>
            <el-form-item label="组件地址">
              <el-input v-model="menu.compPath"></el-input>
            </el-form-item>
            <el-form-item label="路由路径">
              <el-input v-model="menu.path"></el-input>
            </el-form-item>
       </el-form>



      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="closeDig">取 消</el-button>
    <el-button type="primary" @click="doAction()">确 定</el-button></span>
    </el-dialog>

    <el-container>
      <el-header>

        <el-button type="primary" @click="showAdd()">添加菜单</el-button>
        <el-button type="danger" @click="doDelete()">删除选中节点</el-button>
      </el-header>
      <el-main>

        <el-tree
          :data="treeData"
          :props="defaultProps"
          :node-key="nodeKey"
          show-checkbox
          @check="chooseNode"
          :default-checked-keys="checked_arr"
        >

<!--        <span class="custom-tree-node" slot-scope="{ node, data }">-->
<!--          <span>{{ node.label }}</span>-->
<!--          <span>-->
<!--            <el-button-->
<!--              type="text"-->
<!--              size="mini"-->
<!--              @click="showEdit(data)">-->
<!--              编辑-->
<!--            </el-button>-->
<!--          </span>-->
<!--        </span>-->

        </el-tree>
      </el-main>
    </el-container>

  </div>

</template>
<script>

  import {_deleteNode,_editNode, _selectAllMenusOption, _getParentMenus, _getNodeById, _insertNode} from "@/services/menus"

  export default {
    name: "HelloWorld",
    data: function () {
      return {
        nodeKey:"id",
        editOrAddTitle: "添加菜单",
        editOrAddShow: false,
        editOrAdd: "add",
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        checked_arr: [],
        parent_option: [
          {
            id: "0",
            name: "主页面"
          },
        ],
        menu: {
          path: undefined,
          name: undefined,
          icon: undefined,
          compName: undefined,
          compPath: undefined,
          pid: undefined,
        }
      }
    },
    methods: {
      //手动添加选中数组
      chooseNode(obj1,obj2){
        // console.log(obj1,obj2)
        this.checked_arr = obj2.checkedKeys
      },
      //批量删除节点
      doDelete(){
        console.log(this.treeData)
        _deleteNode(this.checked_arr).then(resp=>{
          this.resetMenu()
          this.closeDig()
        })
      },
      //确定修改
      doEdit() {
        _editNode(this.menu).then(resp => {
          this.resetMenu()
          this.closeDig()
          console.log(resp)
        })
      },
      //关闭窗口
      closeDig() {
        this.editOrAddShow = false
        this.resetTree()
      },
      //确定操作
      doAction() {
        if (this.editOrAdd === "add") {
          this.doAddNode()
        }
        if (this.editOrAdd === "edit") {
          this.doEdit()
        }
      },
      //添加节点
      doAddNode() {
        let _this = this
        _insertNode(this.menu).then(resp => {
          console.log(resp)
          _this.resetMenu()
          // this.getTree()
          this.closeDig()
          console.log(this.$router)
        })
      },
      //重置菜单
      resetMenu() {
        // 重置标签页
        this.$store.commit("TABS_RESET");
        // 重置菜单
        this.$store.commit("MENU_RESET");
        //将用户信息继续存进去
        sessionStorage.setItem("userInfo", JSON.stringify(this.$store.getters.getUserInfo));
        // 获取菜单列表
        this.$store.dispatch("handleMenu");

      },
      //根据id获取当前节点的所有信息
      selectNodeById(nodeId) {
        _getNodeById(nodeId).then(resp => {
          this.menu = resp;
        })
      },
      //显示编辑菜单弹出框
      showEdit(dataNode) {
        this.getParentMenus()
        this.editOrAddTitle = "编辑菜单"
        this.editOrAddShow = true
        this.editOrAdd = "edit"
        this.selectNodeById(dataNode.id)
      },
      //显示添加菜单弹出框
      showAdd() {
        this.editOrAddTitle = "添加菜单"
        this.editOrAddShow = true
        this.editOrAdd = "add"
        this.getParentMenus()
      },
      //初始化弹出框
      resetTree() {
        this.parent_option = [
          {
            id: 0,
            name: "主目录"
          },
        ]
        this.menu = {
          path: undefined,
          name: undefined,
          icon: undefined,
          compName: undefined,
          compPath: undefined,
          pid: undefined,
        }
      },
      //获取菜单树
      getTree() {
        this.treeData = []
        _selectAllMenusOption().then(resp => {
          this.treeData = resp
        })
      },
      //获取下拉框的父目录
      getParentMenus() {
        this.resetTree()
        _getParentMenus().then(resp => {
          this.parent_option = this.parent_option.concat(resp)
        })
      },
      //点击树节点触发的事件
      handleNodeClick(data) {
        console.log(data, "tree");
      },
      //关闭窗口事件
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
    },
    mounted() {
      //初始化获取树信息
      this.getTree()
      this.getParentMenus()
    },
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
